<script lang="ts">
export default {
  name: 'Study4StuDemo2'
}
</script>

<template>
  <h2>Reactive Proxy vs. Original</h2>
  <div class="note">
    <p>1. 创建相同的对象但引用地址不同，不全等</p>
    <p>2. reactive()返回的对象是Proxy,与原始对象不同</p>
    <p>3. 变量进行多层reactive()嵌套，返回的依然是Proxy；如果判断是Proxy,则不会多层包装</p>
    <p>
      4.
      reactive()包装的对象，如果是引用地址，会发生浅拷贝，影响原始对象；reactive(JSON.parse(JSON.stringify(raw)))深拷贝
    </p>
    <p>5. reactive()不是引用类型不会包装，；是引用类型，会再包装，与原始值不相同</p>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

let raw = { name: '张长春' } // raw
// let raw = {}
let raw2 = {}

console.log(raw === raw2, 'raw === raw2') //false: 即使它们都是空对象，它们在内存中的地址是不同的，所以 raw === raw2 的结果是 false。

let proxy = reactive(raw) //  包装的raw

console.log(raw === proxy) // false:reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的

// 在同一个对象上调用 reactive() 会返回相同的代理
console.log(reactive(raw) === proxy, 'reactive(raw) === proxy') // true

let proxy2: any = reactive(raw)

let proxy3 = reactive(JSON.parse(JSON.stringify(raw)))

proxy2.name = '廖文静'

console.log(proxy, 'proxy') //  { name: '廖文静' }  reactive包装的raw
console.log(proxy2, 'proxy2') // { name: '廖文静' }  reactive包装的raw
console.log(proxy3, 'proxy3') //  { name: '张长春' }  ractive & JSON.parse深拷贝的raw

// 在一个代理上调用 reactive() 会返回它自己
console.log(reactive(proxy) === proxy) // true

proxy2.next = raw2

let num = 3
proxy2.next2 = num
console.log(proxy2.next2 === num, 'proxy2.next2  === num') // true num 不是引用类型不会包装
console.log(proxy2.next === raw2, 'proxy2.next === raw2') // false raw2 是引用类型，会用 reactive 再包装
console.log(proxy2.next)
</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
